<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>拳皇角色页</title>
	<style>

/* 【全局】 */
		/* “优设标题体”引入 */
		@font-face{
			font-family:'ys';/*起名*/
			src:url('./YouShe.ttf')format('truetype')/*...*/
		}

		/* 洗牌 */
		*{
			margin: 0;
			padding: 0
		}
		/* 身体尺寸 */
		body, html {
			height: 100%;
			width: 100%;
			overflow: hidden;
		}

		/* 大界面尺寸、位置固定 */
		.bigBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

/* 【背景】 */
		/* 背景长图尺寸、位置固定，默认全部透明度为0 */
		.bigBox .longBg li {
			width: 100%;
			height: 100%;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
		/* 四张背景图内容设置 */
		.bigBox .longBg li:nth-of-type(1) {
			background-image: url(./image/role1_bg.jpg);
		}
		.bigBox .longBg li:nth-of-type(2) {
			background-image: url(./image/role2_bg.jpg);
		}
		.bigBox .longBg li:nth-of-type(3) {
			background-image: url(./image/role3_bg.jpg);
		}
		.bigBox .longBg li:nth-of-type(4) {
			background-image: url(./image/role4_bg.jpg);
		}
		/* “当前选中”角色的背景图显示，透明度为100% */
		.bigBox .longBg .active {
			opacity: 1;
			/* 滚动背景动画 */
			animation:run 14s linear infinite;
		}
		@keyframes run{
			0%{background-position:0 0;}
			50%{background-position:-1400px 0;}
			100%{background-position:0 0;}
		}
		/* 4%黑透全屏遮罩 */
		.bigBox .mask4 {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.04);
		}

/* 头像 */
		/* “左侧头像总盒”位置固定，层级置最顶 */
		.bigBox .headsBox {
			position: absolute;
			left: 20px;
			top: 25%;
			z-index: 100;
		}
		/* 列表默认样式清洗，布局设置，鼠标移入显示可点击状态 */
		.bigBox .headsBox li {
			list-style-type: none;
			margin-bottom: 0px;
			cursor: pointer;
		}
		/* 头像尺寸设置 */
		.bigBox .headsBox li img {
			width: 70%;
		}
		/* 未选中时，彩色头像消失，黑白头像显示 */
		.bigBox .headsBox li img.offStates {
			display: block;
		}
		.bigBox .headsBox li img.onStates {
			display: none;
		}
		/* 选中时彩色头像显示，黑白头像消失，彩色头像有闪烁效果 */
		.bigBox .headsBox li.active img.onStates {
			display: block;
			animation:show 1s linear infinite;
		}
		@keyframes show{
			0%{opacity: 0.4;}
			50%{opacity:1;}
			100%{opacity:0.4;}
		}
		.bigBox .headsBox li.active img.offStates {
			display: none;
		}

/* 主角 */
		/* “主角盒子”大小、位置、样式设置；默认透明度为0，上移480px，不显示；所有样式变化在0.3秒内完成 */
		.roleBox{
			width: 928px;
			height: 480px;
			position: absolute;
			left:50%;
			top: 50%;
			margin-left: -464px;
			margin-top: -240px;
			border-radius: 16px;
			background-color: rgba(0,0,0,.56);
			opacity: 0;
			transition: all .3s;
			transform: translateY(-480px);
		}
		/* “选中角色盒子”显示，透明度为1，且位置复原 */
		.rActive{
			opacity: 1;
			transform: translateY(0px);
		}

	/* 背景模型 */
		/* 角色“背景模型”位置固定；默认透明度为0，左移90px；所有样式变化延迟0.2秒后在0.7秒内完成 */
		.roleBox .bgMd{
			position: absolute;
			bottom: 0;
			opacity: 0;
			transform: translateX(-90px);
			transition: all .7s .2s;
		}
		/* 不同角色“背景模型”大小、位置区分 */
		div[data*="KYO"] .bgMd{
			width: 510px;
			right: 408px;
		}
		div[data*="TERY"] .bgMd{
			height: 520px;
			right: 340px;
		}
		div[data*="HW"] .bgMd{
			height: 550px;
			right: 320px;
		}
		div[data*="IORI"] .bgMd{
			height: 520px;
			right: 400px;
		}

		/* “背景模型”和文案层中间35%的渐变黑透遮罩，遮罩的尺寸、位置、样式设置 */
		.roleBox .bottomMask{
			width: 928px;
			height: 280px;
			position: absolute;
			bottom: 0;
			background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35));
			border-radius:16px;
		}

	/* 前景模型 */
		/* 角色“前景模型”位置、大小固定；默认透明度为0，右移90px；所有样式变化延迟0.2秒后在0.4秒内完成 */
		.roleBox .frMd{
			position: absolute;
			bottom: 0;
			height: 441px;
			opacity: 0;
			transform: translateX(120px);
			transition: all .4s .2s;
		}
		/* 不同角色“前景模型”位置区分 */
		div[data*="KYO"] .frMd{
			left:243px;
		}
		div[data*="TERY"] .frMd{
			left:350px;
		}
		div[data*="HW"] .frMd{
			left:260px;
		}
		div[data*="IORI"] .frMd{
			left:370px;
		}
		/* 当前“选中角色盒子”的“前景模型”、“背景模型”透明度为100%，且位置复原 */
		.rActive .bgMd, .rActive .frMd{
			opacity: 1;
			transform: translateX(0px);
		}

	/* 信息盒子 */
		/* 角色“信息盒子”位置固定；默认透明度为0，右移90px；所有样式变化延迟0.3秒后在0.5秒内完成 */
		.roleBox .innfor{
			position: absolute;
			left:30px;
			bottom: 30px;
			opacity: 0;
			transform: translateY(60px);
			transition: all .5s .3s;
		}
		/* “信息盒子”中标题大小、样式、间距、布局设置 */
		.roleBox .innfor h1{
			font-family:'ys';
			font-size: 64px;
			color:#fff;
			line-height: 64px;
			letter-spacing: 1px;
			text-shadow: 5px 5px 0px #D62323;
			margin-bottom: 15px;
		}
		/* “信息盒子”中段落大小、间距、样式设置 */
		.roleBox .innfor p{
			font-size: 14px;
			line-height: 22px;
			letter-spacing: 1px;
			color: #FFFFFF;
		}
		/* 当前“选中角色”的“信息盒子”透明度为100%，且位置复原 */
		.rActive .innfor{
			opacity: 1;
			transform: translateY(0px);
		}

	/* 关联角色 */
		/* “关联角色盒子”位置、布局设置；默认透明度为0，右移220px；所有样式变化延迟0.3秒后在0.7秒内完成 */
		.roleBox .rexRoles{
			position: absolute;
			right: 20px;
			top: 20px;
			padding-right: 80px;
			opacity: 0;
			transform: translateX(220px);
			transition: all .7s .3s;
		}
		/* “关联角色盒子”（下面一个）位置设置；右移80px；所有样式变化延迟0.6秒后在0.7秒内完成 */
		.roleBox .rexRolesBottom{
			top:auto;
			bottom: 20px;
			transform: translateX(80px); 
			transition: all .7s .6s;
		}
		/* 当前“选中角色”的“关联角色盒子”透明度为100%，且位置复原 */
		.rActive .rexRoles{
			opacity: 1;
			transform: translateX(0); 
		}
		/* “关联角色名字”大小、样式、布局设置 */
		.roleBox .rexRoles .role h2{
			font-family: 'ys';
			font-size: 32px;
			line-height: 32px;
			letter-spacing: 2px;
			color:#fff;
			margin-bottom: 5px;
		}
		/* “关联角色名字”下面白线尺寸、样式、布局设置 */
		.roleBox .rexRoles .role .line{	
			height: 2px;
			background: rgba(255, 255, 255, 0.56);
			margin-bottom: 8px;
		}
		/* 不同“关联角色名字”下面白线长度不同，分别设置 */
		.roleBox .rexRoles .ben .line{
			width: 156px;
		}
		.roleBox .rexRoles .iori .line{
			width: 92px;
		}
		.roleBox .rexRoles .andy .line{
			width: 154px;
		}
		.roleBox .rexRoles .athena .line{
			width: 156px;
		}
		.roleBox .rexRoles .kyo .line{
			width: 90px;
		}
		/* “关联角色介绍段落”大小、样式、布局设置 */
		.roleBox .rexRoles .role p{
			font-size: 11px;
			line-height: 16px;
			letter-spacing: 1px;
			color: #FFFFFF;
			margin-bottom: 8px;
		}
		/* “关联角色特典图片”位置设置 */
		.roleBox .rexRoles .role .pic{
			position: relative;
		}
		/* “关联角色特典图片”上有70%黑透遮罩层，所有样式变化在0.5秒内完成 */
		.roleBox .rexRoles .role .pic .mask7{
			position: absolute;
			left:0;
			top:0;
			width: 232px;
			height:92px;
			background-color: rgba(0, 0, 0, 0.7);
			transition: all .5s;
		}
		/* 鼠标悬停在“关联角色特典图片”上，黑色遮罩透明度变0，隐藏 */
		.roleBox .rexRoles .role .pic .mask7:hover{
			background-color: rgba(0, 0, 0, 0);
		}
		/* “关联角色特典图片”图像大小设置 */
		.roleBox .rexRoles .role .pic img{
			width:232px;
		}
		/* “关联角色模型”位置、尺寸设置；默认透明度为0，右移80px；所有样式变化延迟0.6秒后在0.7秒内完成 */
		.roleBox .rexRoles .role .md{
			position: absolute;
			height: 90%;
			opacity: 0;
			transform: translateX(80px); 
			transition: all .7s .6s;
		}
		/* 不同“关联角色模型”位置区分 */
		.roleBox .rexRoles .ben .md{
			right:-20px;
			top:20px
		}
		.roleBox .rexRoles .iori .md,
		.roleBox .rexRoles .kyo .md{
			right: 0;
			top: 20px;
		}
		.roleBox .rexRoles .andy .md,
		.roleBox .rexRoles .athena .md{
			right: 0px;
			top: 20px;
		}
		/* 当前“选中角色”的“关联角色模型”透明度为100%，且位置复原 */
		.rActive .rexRoles .role .md{
			opacity: 1;
			transform: translateX(0);
		}
		
	</style>
</head>
<body>
	<!-- 总窗口 -->
	<div class="bigBox">

		<!-- 背景音乐 -->
		<audio autoplay loop="loop" id="bgm">
			<source src="./music/kofBGM.mp3" type="audio/mpeg"></source>
		</audio>
		<!-- 选中音效 -->
		<audio src="./music/choose.wav" id="chooseSound">
			<source src="./music/kofBGM.mp3" type="audio/mpeg"></source>
		</audio>
		

		<!-- 背景大长图 -->
		<ul class="longBg">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<!-- 4%黑透遮罩层 -->
		<div class="mask4"></div>

		<!-- 右侧小头像盒子 -->
		<div class="headsBox">
			<ul>
				<li class="active">
					<img src="./image/role1_head_on.png" alt="" class="onStates">
					<img src="./image/role1_head.png" alt="" class="offStates">
				</li>
				<li>
					<img src="./image/role2_head_on.png" alt="" class="onStates">
					<img src="./image/role2_head.png" alt="" class="offStates">
				</li>
				<li>
					<img src="./image/role3_head_on.png" alt="" class="onStates">
					<img src="./image/role3_head.png" alt="" class="offStates">
				</li>
				<li>
					<img src="./image/role4_head_on.png" alt="" class="onStates">
					<img src="./image/role4_head.png" alt="" class="offStates">
				</li>
			</ul>
		</div>

		<!-- 选中主角色盒子 -->
		<div class="roleBox rActive" data=“KYO”>
			<!-- 背景角色模型 -->
			<img src="./image/role_inn/role1_a.png" alt="" class="bgMd">
			<!-- 底部渐变遮罩层 -->
			<div class="bottomMask"></div>
			<!-- 前景角色模型 -->
			<img src="./image/role_inn/role1_b.png" alt="" class="frMd">
			<!-- 前景角色装饰（火焰） -->
			<!-- <img src="./image/role_inn/role1_b_fire.png" alt="" class="fire"> -->
			<!-- 角色信息盒子 -->
			<div class="innfor">
				<h1>草稚京</h1>
				<p>京是守护三种之神器之一，“草薙剑”<br/>的草薙流古武术的继承者，拥有赤炎<br/>能力。在1994年和红丸大门组成日本<br/>队，一同参加KOF'94。</p>
			</div>
			<!-- 关联人物"二阶堂红丸"角色盒子 -->
			<div class="rexRoles">
				<div class="role ben">
					<h2>二阶堂红丸</h2>
					<div class="line"></div>
					<p>京的队友，拥有堪比一流模特的容貌，而<br/>且多才多艺二阶堂集团的会长之子，拥有<br/>着一般人无可比拟的优越环境，在格斗技<br/>这个领域内也称得上是极有天赋的人。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/ben_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/ben_md.png" alt="" class="md">
				</div>
			</div>
			<!-- 关联人物"八神庵"角色盒子 -->
			<div class="rexRoles rexRolesBottom">
				<div class="role iori">
					<h2>八神庵</h2>
					<div class="line"></div>
					<p>京的宿敌、好对手，初次登场于拳皇系列<br/>第二作《拳皇95》。是拳皇系列游戏主人<br/>公草薙京的宿敌·好对手，拳皇大蛇篇的<br/>另一位主人公。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/iori_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/iori_md.png" alt="" class="md">
				</div>
			</div>
		</div>

		<div class="roleBox" data=“TERY”>
			<!-- 背景角色模型 -->
			<img src="./image/role_inn/role2_a.png" alt="" class="bgMd">
			<!-- 底部渐变遮罩层 -->
			<div class="bottomMask"></div>
			<!-- 前景角色模型 -->
			<img src="./image/role_inn/role2_b.png" alt="" class="frMd">
			<!-- 角色信息盒子 -->
			<div class="innfor">
				<h1>特瑞博加德</h1>
				<p>特瑞的武术的最早启蒙是杰夫。作为<br/>八极正拳的传人，杰夫发现了特瑞和<br/>安迪的武学资质，短短的时间内，兄<br/>弟俩的武术得到了很大提高。</p>
			</div>
			<!-- 关联人物"安迪"角色盒子 -->
			<div class="rexRoles">
				<div class="role andy">
					<h2>安迪博加德</h2>
					<div class="line"></div>
					<p>舞的男朋友，哥哥是特瑞博加德，他们都<br/>是杰夫·博加德所收养的养子，杰夫遇害<br/>后和哥哥踏上了复仇之路。在日本修行了<br/>不知火术。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/andy_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/andy_md.png" alt="" class="md">
				</div>
			</div>
			<!-- 关联人物"八神庵"角色盒子 -->
			<div class="rexRoles rexRolesBottom">
				<div class="role iori">
					<h2>八神庵</h2>
					<div class="line"></div>
					<p>京的宿敌、好对手，初次登场于拳皇系列<br/>第二作《拳皇95》。是拳皇系列游戏主人<br/>公草薙京的宿敌·好对手，拳皇大蛇篇的<br/>另一位主人公。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/iori_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/iori_md.png" alt="" class="md">
				</div>
			</div>
		</div>

		<div class="roleBox" data=“HW”>
			<!-- 背景角色模型 -->
			<img src="./image/role_inn/role3_a.png" alt="" class="bgMd">
			<!-- 底部渐变遮罩层 -->
			<div class="bottomMask"></div>
			<!-- 前景角色模型 -->
			<img src="./image/role_inn/role3_b.png" alt="" class="frMd">
			<!-- 角色信息盒子 -->
			<div class="innfor">
				<h1>不知火舞</h1>
				<p>不知火流忍术的前当家——不知火半<br/>藏的孙女，从小父母双亡，被祖父抚<br/>养长大，并学习不知火流忍术与骨法<br/>拳。在这段时间，她遇见了博加德。</p>
			</div>
			<!-- 关联人物"安迪"角色盒子 -->
			<div class="rexRoles">
				<div class="role andy">
					<h2>安迪博加德</h2>
					<div class="line"></div>
					<p>舞的男朋友，哥哥是特瑞博加德，他们都<br/>是杰夫·博加德所收养的养子，杰夫遇害<br/>后和哥哥踏上了复仇之路。在日本修行了<br/>不知火术。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/andy_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/andy_md.png" alt="" class="md">
				</div>
			</div>
			<!-- 关联人物"雅典娜"角色盒子 -->
			<div class="rexRoles rexRolesBottom">
				<div class="role athena">
					<h2>麻宫雅典娜</h2>
					<div class="line"></div>
					<p>舞的好友，拥有超能力的日本女<br/>子高中生兼偶像歌手，以超能力<br/>和中国拳法进行战斗。拥有可爱<br/>的外貌和鲜明的特点。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/athena_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/athena_md.png" alt="" class="md">
				</div>
			</div>
		</div>

		<div class="roleBox" data=“IORI”>
			<!-- 背景角色模型 -->
			<img src="./image/role_inn/role4_a.png" alt="" class="bgMd">
			<!-- 底部渐变遮罩层 -->
			<div class="bottomMask"></div>
			<!-- 前景角色模型 -->
			<img src="./image/role_inn/role4_b.png" alt="" class="frMd">
			<!-- 角色信息盒子 -->
			<div class="innfor">
				<h1>八神庵</h1>
				<p>他是个莫名其妙的家伙，<br/>大家都以为他是暴力狂时，<br/>他以一句“我讨厌暴力”令人大跌眼镜；<br/>大家都以为他没有感情不懂温柔，<br/>但是事实表明，他是个音乐人，<br/>曾经在火车站微笑着用牛奶喂猫...</p>
			</div>
			<!-- 关联人物"草稚京"角色盒子 -->
			<div class="rexRoles">
				<div class="role kyo">
					<h2>草稚京</h2>
					<div class="line"></div>
					<p>八神宿敌，相爱相杀。京是守护三种之神<br/>器之一“草薙剑”的草薙流古武术的继承<br/>者，拥有赤炎能力。和八神的紫色火焰形<br/>成鲜明的对比。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/kyo_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/kyo_md.png" alt="" class="md">
				</div>
			</div>
			<!-- 关联人物"二阶堂红丸"角色盒子 -->
			<div class="rexRoles rexRolesBottom">
				<div class="role ben">
					<h2>二阶堂红丸</h2>
					<div class="line"></div>
					<p>京的队友，拥有堪比一流模特的容貌，而<br/>且多才多艺二阶堂集团的会长之子，拥有<br/>着一般人无可比拟的优越环境，在格斗技<br/>这个领域内也称得上是极有天赋的人。</p>
					<div class="pic">
						<!-- 7%黑透遮罩 -->
						<div class="mask7"></div>
						<!-- 角色特典图片 -->
						<img src="./image/role_rel/ben_sp.png" alt="">
					</div>
					<!-- 人物小模型 -->
					<img src="./image/role_rel/ben_md.png" alt="" class="md">
				</div>
			</div>
		</div>

	</div>

	<script>
		// 接着奏乐！接着舞
		function musicPlay() {
			//获取背景音乐，通过ID找到
			var music = document.getElementById("bgm");
			// 如果没播放，启动播放
			if (music.paused) { 
				music.paused=false;
				music.play(); 
			}
		}
		// 1毫秒启动奏乐函数
		setInterval("musicPlay()",5000);

		// 头像集合
		var face = document.querySelectorAll('.headsBox ul li');
		// 背景集合
		var bg = document.querySelectorAll('.longBg li');
		// 角色盒子集合
		var role = document.querySelectorAll('.bigBox .roleBox');
		var chooseSound = document.getElementById("chooseSound");

		//上个选中角色的索引，初始值为0，即第一个角色
		var ln = 0;
		//当前选中角色的索引，初始值为0，即第一个角色
		var cn = 0;

		// 【定时器】：每4s自动切换角色，即每隔4秒执行一次【自动播放函数】
		var timer = setInterval(autoPlay, 4000);

		// 【自动播放函数】：切换当前选中角色索引，并执行【切换角色函数】
		function autoPlay() {
			// 让“当前选中角色”在0、1、2、3切换
			cn++;
			if (cn == 4) {
				cn = 0;
			}
			// 执行【切换角色函数】
			change();
		}

		// 头像个数(4个)
		var len = face.length;
		// 在每个头像上绑定事件
		for (let i = 0; i < len; i++) {
			// 鼠标移入时：清空定时器，暂停播放；更改“当前选中角色”的索引为鼠标悬停头像所在的索引
			face[i].onmouseover = function () {
				// 清空定时器，暂定播放
				clearInterval(timer);
				// “当前索引”改为当前鼠标悬停头像所在索引
				cn = i;
				// 执行【切换角色函数】
				change();
			}
			// 鼠标移开时：定时器再开启，每4s执行【切换角色函数】
			face[i].onmouseout = function () {
				timer = setInterval(autoPlay, 4000);
			}
			// 鼠标点击时：播放选中音效
			face[i].onclick = function () {
				chooseSound.play();
			}
		}

		// 【切换角色函数】：角色显示内容改变
		function change() {
			// 头像变
			face[ln].className = "";
			face[cn].className = "active";
			// 背景变
			bg[ln].className = "";
			bg[cn].className = "active";
			// 角色变
			role[ln].className = "roleBox";
			role[cn].className = "roleBox rActive";
			// 索引变，现在的索引变为上一个索引
			ln = cn;
		}

	</script>
</body>
</html>